﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文章分类</title>
    <link rel="stylesheet" href="~/lib/Newspublis/css/list.css" />
    <script src="~/lib/Newspublis/js/vue.js"></script>
    <script src="~/lib/axios.js"></script>
    <link href="~/css/NewsList.css" rel="stylesheet" />
    <style>
    </style>
</head>
<body>
    <div class="listbox">
        <div class="Mainarea">
            <h2 class="h-1">{{ "——" + NewsTitle + "文章" }}</h2>
            <div class="Mainarealist">
                <div class="Mainareaitem" v-on:click="openNews(item.id)" v-for="item in News" :key="item.id">
                    <img :src="item.image"
                         v-show="imageLoaded"
                         v-on:error="imageLoaded = false"
                         v-on:load="imageLoaded = true"
                    alt="" />
                    <div>
                        <h2>{{item.newsTitle}}</h2>
                        <p>{{item.publishDate}}</p>
                        <p v-html="item.newsContent" style="overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; height: auto;">
                          
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右边-->
        <div class="seachbox">
            <button v-on:click="reload" class="dohua" style="position: fixed; right: 100px; top: 57%; display: block; width: 50px; height: 50px; border: 1px solid #e2e2e2; margin-bottom: 10px; cursor: pointer; text-align: center; line-height: 15px; color: #666; background: #fff; transition: all .3s ease-out;">刷新</button>
            <button class="dohua" style="position: fixed; right: 100px; top: 65%; display: block; width: 50px; height: 50px; border: 1px solid #e2e2e2; margin-bottom: 10px; cursor: pointer; text-align: center; line-height: 15px; color: #666; background: #fff; transition: all .3s ease-out;">设置</button>
            <button class="dohua" style="position: fixed; right: 100px; top: 73%; display: block; width: 50px; height: 50px; border: 1px solid #e2e2e2; margin-bottom: 10px; cursor: pointer; text-align: center; line-height: 15px; color: #666; background: #fff; transition: all .3s ease-out;">用户反馈</button>
            <div class="searchtitle">
                <p>相关推荐~开发者团队博客</p>
            </div>
    
            <a target="_blank" style="text-decoration:none" href="https://blog.csdn.net/dawfwafaew/category_11848118.html">
                <div class="searchcont">
                    <img src="~/images/f57725ead13e4fe98d208c21f136609c_dawfwafaew.jpg" alt="" />
                    <div class="seacchtext">
                        <h5>小威编程</h5>
                        <p>学到很多东西的诀窍，就是一下子不要学很多。</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: ".listbox",
            data() {
                return {
                    indexs: -1,
                    typeid: 0,
                    NewsTitle: "",
                    News: [],
                    url: "",
                    imageLoaded: true // 初始设为 true，假设图片可以加载
                };
            },
            mounted() {
                var typeids = localStorage.getItem("NewsTypeId");
                this.NewsTitle = localStorage.getItem("NewsTypeName");
                this.typeid = parseInt(typeids);

                axios({
                    method: 'Post',
                    url: '/News/GetTypeNews',
                    data: {
                        id: this.typeid
                    }
                }).then(res => {
                    if (res.data.code == 200) {
                        this.url = res.data.message;
                        this.News = res.data.data;
                        for (var i = 0; i < this.News.length; i++) {
                            this.News[i].image = this.url + this.News[i].image;
                        }
                        return;
                    }
                    if (res.data.code != 200) {
                        alert("该类型还没博客文章！~过段时间再来看看吧。");
                        return;
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            methods: {
                reload() {
                    location.reload();
                },
                openNews(e) {
                    var id = parseInt(e);
                    localStorage.setItem("NewsId", id);
                    window.open("/News/NewsShow");
                }
            }
        });
    </script>
</body>
</html>
